<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作:操作元素和元素内容的方式
		 .html()           无参  -----功能：获取匹配元素集合中第一个元素 
		                   有参  -----功能：【设置】获取匹配元素集合中所有元素并替换 
		特点：可以添加元素和内容
		
		 .val()            无参  -----功能：针对表单元素，input、select...
		                                   获取第一个表单元素的值【value】
		                   有参  -----功能：针对表单元素，input、select...
						                   设置表单元素的值，input直接设置
										                   select不能直接设置   只能设置原有value值
		特点：设置表单元素+内容、下拉列表只能添加存在value值				   
		 
		 
		 .text()            无参  -----功能：获取匹配元素集合所有元素的文本内容
		                    有参  -----功能：【设置】获取匹配元素集合所有元素的文本内容做替换
		特点：添加内容					
		 -->
	</head>
	<body>
		
		<h1>val()函数的使用</h1>
		<button class="btn1">val()函数【input】 无参</button>
		<input type="text" value="文本框真实数据">
		<input type="text" placeholder="文本框提示">
		
		
		
		<!-- html:按钮.btn2 select>option*3
		     jp:点击按钮，显示第一个表单元素
		 -->
		 <br>
		<button class="btn2">val()函数【select】 无参  【按钮】</button>
		
		<button class="btn3">val()函数【select】 有参  【按钮】</button>
		<select>
			<!-- option包裹用户显示数据 ,option属性value真实的数据-->
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		
		
		<h1>text()函数使用：包裹内容：文本</h1>
		<button class="btn4">text()函数 无参</button>
		<button class="btn5">text()函数 有参</button>
		<p>lorem4</p>
		<p>lorem5<p>
		<p>lorem6<p>
		
		<script>
			
		//抓到无参按钮，点击，打印p的text值
					
		$(".btn4").click(function(){
			var ptext=$("p").text();
			alert(ptext);
		});	
			
		
		
		//抓到有参按钮，点击，改变p中文本的内容：改变效果			
		$(".btn5").click(function(){
			$("p").text("改变效果");
		});	
			
		// $(".btn3").click(function(){
		// 	//var vals=$("select").val("rem1");
		// 	// 抓取打印select的s对象，默认字符串形式表示[object Object]
		// 	//抓取select的s对象,调用对象toString()方法，如果没有重写[object Object]
			
		// 	//仍然是设置，第一个option 的value值
		// 	$("select").val("rem1");
		// 	var vals=$("select").val();
		// 	alert("val() 函数针对下拉列表："+vals)
		// });		
			
			
			
			// $(".btn1").click(function(){
				/*变量名不允许使用关键字  js中关键字 for  in  遍历数组*/
				// var ins=$("input").val();
				// alert("val()针对input元素  无参"+ins);
			// });     
			
			
		// $(".btn2").click(function(){
		// 	/*下拉列表  抓select元素*/
		// 	var vals=$("select").val();
		// 	alert("val() 函数针对下拉列表："+vals)
		// });	
			
			
		</script>
		
		
		
	<!-- ---------------------------------------------------------------------------- -->	
		<h1>html()函数的使用</h1>
		<button>html()函数 有参【按钮】</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<script>	
			
	/*		$('button').click(function(){
				$("span").html("<marquee>lorem</marquee>");
				});  */
		</script>
		<script>
			/* 变量   js变量---jq
			int i=1; java写法，强类型语言
			var  i=数值、元素；javaScript 弱类型语言
					*/
				   
		/*	var html=$("span").html();
			 alert("html()函数的无参的值"+html); */
		</script>
	</body>
</html>